<template>
  <view class="upload-container">
    <!-- 照片预览/选择区域 -->
    <view class="cover-section">
      <view class="section-title">照片预览</view>
      <view class="cover-upload" @click="choosePhoto">
        <image 
          v-if="photoPath" 
          :src="photoPath" 
          mode="aspectFill" 
          class="cover-image"
        ></image>
        <view v-else class="upload-placeholder">
          <u-icon name="camera" size="48" color="#999"></u-icon>
          <text>点击选择照片</text>
        </view>
      </view>
    </view>
    
    <!-- 表单区域 -->
    <view class="form-section">
      <view class="form-group">
        <text class="form-label">照片标题</text>
        <input 
          class="form-input" 
          v-model="form.title" 
          placeholder="请输入照片标题" 
          maxlength="50"
        />
      </view>
      
      <view class="form-group">
        <text class="form-label">照片描述</text>
        <textarea 
          class="form-textarea" 
          v-model="form.description" 
          placeholder="请输入照片描述..." 
          maxlength="200"
        ></textarea>
        <text class="word-count">{{form.description.length}}/200</text>
      </view>
      
      <view class="form-group">
        <text class="form-label">访问权限</text>
        <view class="switch-container">
          <text>设为私密照片</text>
          <switch 
            :checked="form.status === 0" 
            @change="onPrivacyChange" 
            color="#3a8838"
          />
        </view>
      </view>
      
      <view class="album-info" v-if="albumName">
        <text class="info-label">添加到相册:</text>
        <text class="album-name">{{ albumName }}</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="cancel-btn" @click="goBack">取消</button>
      <button 
        class="upload-btn" 
        :disabled="isUploading || !photoPath"
        @click="uploadPhoto"
      >{{ isUploading ? '上传中...' : '上传照片' }}</button>
    </view>
  </view>
</template>

<script>
import { uploadPhoto } from '@/api/photo'
import { getMyAlbums } from '@/api/album'

export default {
  data() {
    return {
      photoPath: '',
      albumId: '',
      albumName: '',
      form: {
        title: '',
        description: '',
        status: 1, // 1-公开，0-私密
      },
      isUploading: false
    }
  },
  onLoad(options) {
    // 获取相册ID
    if (options.albumId) {
      this.albumId = options.albumId;
      this.form.albumId = options.albumId;
      this.loadAlbumInfo();
    }
    
    // 如果URL中包含照片路径，则直接设置
    if (options.photoPath) {
      this.photoPath = options.photoPath;
    }
    // 不再自动调用choosePhoto方法
  },
  methods: {
    // 加载相册信息
    async loadAlbumInfo() {
      try {
        const result = await getMyAlbums();
        const albums = result.data?.records || [];
        const currentAlbum = albums.find(a => a.albumId.toString() === this.albumId.toString());
        
        if (currentAlbum) {
          this.albumName = currentAlbum.title || '未命名相册';
        }
      } catch (error) {
        console.error('加载相册信息失败:', error);
      }
    },
    
    // 选择照片
    choosePhoto() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.photoPath = res.tempFilePaths[0];
        }
      });
    },
    
    // 切换私密状态
    onPrivacyChange(e) {
      this.form.status = e.detail.value ? 0 : 1;
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 上传照片
    async uploadPhoto() {
      if (!this.photoPath) {
        uni.showToast({
          title: '请先选择照片',
          icon: 'none'
        });
        return;
      }
      
      this.isUploading = true;
      
      try {
        // 准备上传数据
        const uploadData = {
          file: this.photoPath,
          title: this.form.title,
          description: this.form.description,
          status: this.form.status,
          albumId: this.albumId
        };
        
        // 调用上传API
        await uploadPhoto(uploadData);
        
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        });
        
        // 使用事件通知相册详情页刷新数据
        uni.$emit('photo:uploaded', { albumId: this.albumId });
        
        // 延迟返回
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
            success: () => {
              // 确保返回后页面已刷新
              uni.$emit('photo:uploaded', { albumId: this.albumId });
            }
          });
        }, 1500);
      } catch (error) {
        console.error('上传失败:', error);
        uni.showToast({
          title: error.message || '上传失败',
          icon: 'none'
        });
      } finally {
        this.isUploading = false;
      }
    }
  }
}
</script>

<style>
.upload-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

/* 封面区域样式 */
.cover-section {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  padding: 30rpx;
}

.cover-upload {
  margin: 0 30rpx 30rpx;
  height: 400rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.upload-placeholder text {
  font-size: 26rpx;
  color: #999;
}

.form-section {
  flex: 1;
  padding: 30rpx;
}

.form-group {
  margin-bottom: 30rpx;
  position: relative;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.word-count {
  position: absolute;
  bottom: 10rpx;
  right: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.switch-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.album-info {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 16rpx;
}

.album-name {
  font-size: 28rpx;
  color: #3a8838;
  font-weight: bold;
}

.bottom-bar {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.upload-btn, .cancel-btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.upload-btn {
  background-color: #3a8838;
  color: #fff;
}

.upload-btn[disabled] {
  background-color: #cccccc;
  color: #ffffff;
}
</style> 